<template>
  <div class="data-lineage-custom-node">
    <!-- header -->
    <header class="node-header" :style="headerStyle">
      <a-tooltip :title="nodeData.databaseName">
        <div class="table-type-text text-overflow-ellipsis">
          <a-icon-font
            v-if="nodeTableTypeInfo?.icon"
            :type="nodeTableTypeInfo.icon"
            class="node-icon"
          />
          {{ nodeData.databaseName }}
        </div>
      </a-tooltip>
    </header>

    <!-- 内容 -->
    <main class="node-container">
      <!-- 表名 -->
      <div class="sub-title-container">
        <div
          :title="nodeData.tableName"
          :style="{
            height: `${nodeLineHeight}px`,
            'line-height': `${nodeLineHeight}px`,
          }"
          class="table-name text-overflow-ellipsis"
        >
          {{ nodeData.tableName }}
        </div>
      </div>
      <!-- field -->
      <div class="scroll-container">
        <div
          v-for="field in fieldNameList"
          :key="field.fieldName"
          class="field-item"
          :class="{
            'filed-highlight': linkHighlightFields?.includes(field.fieldName),
          }"
          :style="{
            height: `${nodeLineHeight}px`,
            'line-height': `${nodeLineHeight}px`,
          }"
          @click="toggleSelectField(field)"
          @mouseenter="mouseenterField(field)"
          @mouseleave="mouseleaveField(field)"
        >
          <span
            class="field-name text-overflow-ellipsis"
            :title="field.fieldName"
          >
            <span
              class="icon-box"
              :style="{ background: `rgba(${nodeTableTypeInfo.rgb}, 0.2)` }"
            >
              <a-icon-font
                :type="
                  fieldTypeMap[field.fieldType]?.icon || unKnownFieldType.icon
                "
              />
            </span>
            {{ field.fieldName }}
          </span>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
/**
 * 数据血缘 字段级血缘 自定义 X6 节点
 */
import { Component, Vue, Inject } from 'vue-property-decorator'
import {
  NODE_HEADER_HEIGHT,
  NODE_LINE_HEIGHT,
  TABLE_TYPE_INFO_MAP,
} from './constants'
import { TableFieldDetail } from './interface'

@Component({
  components: {},
})
export default class FiledLineageNode extends Vue {
  $eventBus: any
  @Inject() getGraph: any
  @Inject() getNode: any
  private nodeHeaderHeight: number = NODE_HEADER_HEIGHT || 24
  private nodeLineHeight: number = NODE_LINE_HEIGHT || 24
  private linkHighlightFields: Array<string> | null = [] // hover 链路节点高亮字段
  private fieldTypeMap: any = {
    NUMBER: {
      icon: 'icon-numeric',
      name: 'NUMBER',
    },
    DATE: {
      icon: 'icon-date',
      name: 'DATE',
    },
    BINARY: {
      icon: 'icon-binary',
      name: 'BINARY',
    },
    STRING: {
      icon: 'icon-text',
      name: 'STRING',
    },
    BOOLEAN: {
      icon: 'icon-boolean',
      name: 'BOOLEAN',
    },
    UNKNOWN: {
      icon: 'icon-unknown',
      name: 'UNKNOWN',
    },
  }

  public unKnownFieldType: any = {
    icon: 'icon-unknown',
    name: 'UNKNOWN',
  }

  public get nodeData() {
    return this.getNode().data
  }

  public get nodeTableTypeInfo() {
    return TABLE_TYPE_INFO_MAP[this.nodeData.tableType]
  }

  public get tableType() {
    return this.nodeData.tableType
  }

  public get fieldNameList() {
    return this.nodeData.tableFieldDetailList
  }

  private get headerStyle() {
    const { nodeTableTypeInfo, nodeHeaderHeight } = this
    return {
      background: nodeTableTypeInfo.theme,
      height: `${nodeHeaderHeight}px`,
      'line-height': `${nodeHeaderHeight}px`,
      'font-weight': 400,
      color: '#fff',
    }
  }

  private mounted() {
    const self = this as any
    const node: any = this.getNode() as Node
    // 监听数据改变事件
    node.on('change:states', ({ current }: any) => {
      const {
        onSelectedHighlightLinkField = [],
        onHoverHighlightLinkField = [],
      } = current
      self.linkHighlightFields = [
        ...onSelectedHighlightLinkField,
        ...onHoverHighlightLinkField,
      ]
    })
  }

  private mouseenterField(field: TableFieldDetail) {
    this.emitEvent('field-mouseenter', field.fieldName)
  }

  private mouseleaveField(field: TableFieldDetail) {
    this.emitEvent('field-mouseleave', field.fieldName)
  }

  private clickTimeId: any

  private toggleSelectField(field: TableFieldDetail) {
    clearTimeout(this.clickTimeId)
    this.clickTimeId = setTimeout(() => {
      this.emitEvent('field-toggle-select', field.fieldName)
    }, 250)
  }

  private emitEvent(eventType: string, fieldName: string) {
    this.$eventBus.$emit('field-data-lineage-custom-vue-node-event', {
      databaseName: this.nodeData.databaseName,
      tableName: this.nodeData.tableName,
      fieldName,
      eventType,
    })
  }
}
</script>

<style lang="less" scoped>
@import './vue-node.less';
</style>
